<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<form action="https://www.baidu.com" method="get">
				<div><label>姓名：</label><input type="text" id="name"/><span></span></div>
				<div><label>姓氏：</label><input type="text" id="xing"/><span></span></div>
			    <div><label>登录名：</label><input type="text" id="login"/><span></span></div>
				<div><label>密码：</label><input type="password" id="pw"/><span></span></div>
				<div><label>再次输入密码：</label><input type="password" id="pw2"/><span></span></div>
				<div><label>电子邮箱：</label><input type="email" id="em"/><span></span></div>
				<input type="submit"/>
			</form>
		</div>
		<script src="../../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#name").blur(function(){
					let name=$(this).val();
					
					 let regname=/^[a-zA-Z\s]+$/gi;
					
					if(regname.test(name)){
						$(this).next().text("√").css("color","green");
						return true;
					}
					if(name==''){
						$(this).next().text("姓名不能为空").css("color","red");
						return false;
					}
					$(this).next().text(" 姓名中不能包含数字").css("color","red");
					return false;
				});
				$("#xing").blur(function(){
					let xi=$(this).val();
					let regxing=/^[^\s]+(\s+[a-zA-Z]+)*$/gi;
					if(regxing.test(xi)){
						$(this).next().text("√").css("color","green");
						return true;
					}
					$(this).next().text(" 姓氏不能为空").css("color","red");
					return false;
				});
				$("#login").blur(function(){
					let log=$(this).val();
					let reglog=/^[a-z0-9_]+$/gi;
					if(reglog.test(log)){
						$(this).next().text("√").css("color","green");
						return true;
					}
					$(this).next().text(" (可包含a z、0 9和下划线)").css("color","black");
					return false;
				});
				$("#pw").blur(function(){
					let password=$(this).val();
					let regpassword=/^\w{6,}$/gi;
					if(regpassword.test(password)){
						$(this).next().text("√").css("color","green");
						return true;
					}
					$(this).next().text(" 密码必须等于或大于6个字符").css("color","red");
					return false;
				});
				$("#pw2").blur(function(){
					let password=$("#pw").val();
					let password2=$(this).val();
					if(password==password2){
						$(this).next().text("√").css("color","green");
						return true;
					}
					$(this).next().text(" 两次输入的密码不一致").css("color","red");
					return false;
				});
				$("#em").blur(function(){
					let em=$(this).val();
					let regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					if(regemail.test(em)){
						$(this).next().text("√").css("color","green");
						return true;
					}
					$(this).next().text(" Email格式不正确，必须包含.").css("color","red");
					return false;
				});
			});
		</script>
	</body>
</html>